<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内容渲染指令</title>
  <script src="./lib/vue.js"></script>
</head>

<body>
  <!-- 1. v-text
       2. v-html
       3.{{}} (Mustache语法) (插值表达式)-->

  <!-- v-text会覆盖标签中原本的内容 -->
  <div id='app'>
    <p v-text="message">message</p>
    <p v-text="time">time</p>


    <hr>

    <p>message: {{ message }}</p>
    <p>time: {{ time }}</p>

    <hr>

    <p v-html="info"></p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',//el属性决定vue挂载到哪个元素
      data: {//data用于存储一些数据
        message: 'hello world!',
        time: '2021-8-17',
        info: '<h4 style="color:red;font-weight:bold">演示文字</h4>'
      }
    })
  </script>
</body>

</html>